<template>
  <view class="imgThird"
        :style="{
                       'padding': '0px ' + properties.setStyle.pageMargin+'px',
                    }"
  >

    <view class="wrapper-content" :style="{
        backgroundColor: properties.setStyle.backgroundColor,
        padding: '15px',
        borderRadius: properties.setStyle.borderImgRadius +'px',
      }">
      <view>

        <view style="margin-bottom: 10px">
          <uv-text size="18" :text="properties.text"></uv-text>
        </view>

        <view class="wrapper-content-item">
          <uv-row customStyle="" justify="space-between" gutter="10">
            <uv-col span="6">
              <view class="left">
                <image @click="click(properties.setStyle.leftImg)" :src="properties.setStyle.leftImg.url" class="item-image"></image>
              </view>
            </uv-col>
            <uv-col span="6">
              <view class="right">
                <view class="right-top">
                  <image @click="click(properties.setStyle.rightTop)" :src="properties.setStyle.rightTop.url" class="item-image-2" mode="aspectFill"></image>
                </view>
                <uv-gap height="10" bgColor=""></uv-gap>
                <view class="right-buttom">
                  <image @click="click(properties.setStyle.rightBottom)" :src="properties.setStyle.rightBottom.url" class="item-image-2" mode="aspectFill"></image>
                </view>
              </view>
            </uv-col>
          </uv-row>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
//图文导航
export default {
  name: "ImgThird",
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          "text": "发布跑腿任务",
          "setStyle": {
            "text": "图文导航",
            "leftImg": {
              url: 'https://minio.thisforyou.cn:1443/test/Snipaste_2024-09-26_22-25-19.png',
              path: ''
            },
            "rightTop": {
              url: 'https://img1.baidu.com/it/u=4075744070,664465068&fm=253&fmt=auto&app=138&f=PNG?w=1600&h=500',
              path: ''
            },
            "rightBottom": {
              url: 'https://img1.baidu.com/it/u=1356711348,3846914518&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=263',
              path: ''
            },
            "backgroundColor": "rgba(255, 255, 255, 1)",
            "textColor": "rgb(0, 0, 0)",
            "borderRadius": 10,
            "borderImgRadius": 10,
            "pageMargin": 12
          }
        }
      }
    },
  },
  methods: {
    click(item) {
      // console.log("nnn",item.url+"?params="+encodeURIComponent(JSON.stringify(item.params)))
      if (!item.path){
        uni.showToast({
          icon: 'none',
          title: '努力上线中，敬请期待💪'
        })
        return;
      }
      uni.navigateTo({
        url: item.path + "?params=" + encodeURIComponent(JSON.stringify(item.params))
      })
    }
  },
  onShow() {
    console.log("---", this.properties)
  }
}
</script>

<style scoped lang="scss">
.wrapper-content {
  padding: 20px;
}

.wrapper-content-item {
  //display: flex;
  //align-items: center;
  //width: 100%;
  //position: relative;
}

.item-image {
  border-radius: 5px;
  height: 190px;
  width: auto;
  max-width: 100%;
  display: block;
}

img {
  object-fit: contain !important;
  object-position: center !important;
}

.item-image-2 {
  width: auto;
  max-width: 100%;
  height: 90px;
  display: block;
  border-radius: 5px;
}
</style>
